<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index" width="55" align="center" fixed="left" />
      <el-table-column label="名称" prop="name" min-width="120" />
      <el-table-column label="图标" prop="partLogo" min-width="120">
        <template #default="scope">
          <el-image :src="fileUrl +'/'+ scope.row.partLogo" fit="scale-down" />
        </template>
      </el-table-column>
      <el-table-column label="路径" prop="path" min-width="120" />
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="300">
        <template #default="scope">
          <el-button type="text" @click="changeData(scope.row,scope.$index)">修改</el-button>
          <el-button type="text" :disabled="scope.$index==0" @click="up(scope.$index)">上移</el-button>
          <el-button type="text" :disabled="scope.$index==tableData.length-1" @click="down(scope.$index)">下移</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogOpen" title="修改首页按钮" width="600px" append-to-body :close-on-click-modal="false">
      <el-form label-width="150px">
        <el-form-item label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="图标" prop="amount">
          <ImageUpload v-model="form.partLogo" :limit="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getBaseVenue, miniappIconEdit } from '@/api/ven'
import useUserStore from '@/store/modules/user'
import { getCurrentInstance } from '@vue/runtime-core'


const { proxy } = getCurrentInstance()

const fileUrl = ref(import.meta.env.VITE_APP_FILE_URL)
const tableData = ref([])
const form = ref({})
const dialogOpen = ref(false)

function getVenue() {
  getBaseVenue(useUserStore().user.venueId).then(res => {
    tableData.value = JSON.parse(res.data.miniappIconConfig)
  })
}

function up(index) {
  const temp = tableData.value[index]
  tableData.value[index] = tableData.value[index - 1]
  tableData.value[index - 1] = temp
  saveDate()
}

function down(index) {
  const temp = tableData.value[index]
  tableData.value[index] = tableData.value[index + 1]
  tableData.value[index + 1] = temp
  saveDate()
}

function saveDate() {
  return miniappIconEdit({
    config: JSON.stringify(tableData.value)
  })
}

let rowIndex
function changeData(row, index) {
  rowIndex = index
  dialogOpen.value = true
  form.value = _.assign({}, row, {
    partLogo: fileUrl.value + row.partLogo
  })
}

function submitForm() {
  tableData.value[rowIndex] = _.assign({}, form.value, {
    partLogo: form.value.partLogo.replace(fileUrl.value, '')
  })

  saveDate().then(() => {
    proxy.$modal.msgSuccess('修改成功')
    dialogOpen.value = false
  })
}


defineExpose({
  getVenue
})

</script>

<style>
</style>
